<template>
  <el-card class="ik-chart-card">
    <div slot="header" class="clearfix">
      <span class="ik-chart-card-title">{{ title }}</span>
      <p class="table_title_img" />
      <span class="logo" />
    </div>
    <div
      :id="code"
      class="ik-chart-card-chart"
      :style="'height: ' + height + ''"
    >
      <el-table
        ref="table"
        :data="data"
        :cell-style="getCellStyle"
        :row-style="getRowStyle"
        :header-cell-style="getHeaderStyle"
        :header-row-style="getHeaderStyle"
        :height="height"
        style="width: 100%"
      >
        <el-table-column
          type="index"
          label="序号"
        />
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :show-overflow-tooltip="true"
        />
      </el-table>
    </div>
  </el-card>
</template>

<script>
export default {
  name: "IkLabelBase",
  props: {
    title: {
      type: String,
      default: "标题"
    },
    code: {
      type: String,
      default: "table.base"
    },
    data: {
      type: Array,
      default: function() {
        return [
          { type: "类型1", dep: "部门1", value: "30" },
          { type: "类型1", dep: "部门2", value: "30" },
          { type: "类型1", dep: "部门1", value: "30" },
          { type: "类型4", dep: "部门2", value: "30" }
        ]
      }
    },
    columns: {
      type: Array,
      default: function() {
        return [
          { prop: "type", label: "类型", width: 150 },
          { prop: "dep", label: "部门", width: 150 },
          { prop: "value", label: "取值", width: 120 }
        ]
      }
    },
    // 样式
    height: {
      type: String,
      default: "100%"
    }
  },
  data() {
    return {
      tableData: []
    }
  },
  watch: {
    data(newVal, oldVal) {
      console.log(`Message changed from ${oldVal} to ${newVal}`)
    }
  },
  created() {
  },
  mounted() {
    this.autoScroll()
  },
  beforeDestroy() {
    this.autoScroll(true)
  },
  methods: {
    changeSize() {
      // 修改 echart 大小
      this.chart.resize()
    },
    // 设置自动滚动
    autoScroll(stop) {
      const table = this.$refs.table
      const divData = table.bodyWrapper
      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
      if (stop) {
        // 再通过事件监听，监听到 组件销毁 后，再执行关闭计时器。
        window.clearInterval(this.scrolltimer)
      } else {
        this.scrolltimer = window.setInterval(() => {
          divData.scrollTop += 1
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
            // 重置table距离顶部距离
            divData.scrollTop = 0
          }
        }, 50) // 滚动速度
      }
    },
    getHeaderStyle() {
      return { 'background-color': 'rgba(255, 255, 255, 0)', 'color': 'rgba(255, 255, 255, 1)' }
    },
    getRowStyle({ row, rowIndex }) {
      const $this = this
      const columns = $this.columns
      // 异常判断
      for (const column in $this.columns) {
        const val = $this.data[rowIndex][columns[column]['prop']]
        const errorMin = columns[column]['errorMin']
        const errorMax = columns[column]['errorMax']
        const warningMin = columns[column]['warningMin']
        const warningMax = columns[column]['warningMax']
        if (typeof errorMin !== 'undefined') {
          if (val <= errorMin) {
            return { 'background-color': 'rgba(255, 0, 0, 0.2)', 'color': 'rgba(255, 255, 255, 1)' }
          }
        }
        if (typeof errorMax !== 'undefined') {
          if (val >= errorMax) {
            return { 'background-color': 'rgba(255, 0, 0, 0.2)', 'color': 'rgba(255, 255, 255, 1)' }
          }
        }
        if (typeof warningMin !== 'undefined') {
          if (val <= warningMin) {
            return { 'background-color': 'rgba(255, 0, 0, 0.2)', 'color': 'rgba(255, 255, 255, 1)' }
          }
        }
        if (typeof warningMax !== 'undefined') {
          if (val >= warningMax) {
            return { 'background-color': 'rgba(255, 0, 0, 0.2)', 'color': 'rgba(255, 255, 255, 1)' }
          }
        }
        /*
        // const warningMin = $this.columns[column]['warningMin']
        // const warningMax = $this.columns[column]['warningMax']
        // const errorMax = $this.columns[column]['errorMax']
        const val = row[columns[column]['prop']]
        console.log('2')
        console.log(val)
        */
      }
      // 按间隔返回样式
      if (rowIndex % 2 === 0) {
        return { 'background-color': 'rgba(255, 255, 255, 0)', 'color': 'rgba(255, 255, 255, 1)' }
      } else {
        return { 'background-color': 'rgba(255, 255, 255, 0.1)', 'color': 'rgba(255, 255, 255, 1)' }
      }
    },
    getCellStyle({ row, column, rowIndex, columnIndex }) {
      const $this = this
      if (columnIndex === 0) {
        return {}
      }
      const columnInd = columnIndex - 1
      const columnProp = $this.columns[columnInd]['prop']
      const val = $this.data[rowIndex][columnProp]
      const errorMin = $this.columns[columnInd]['errorMin']
      const errorMax = $this.columns[columnInd]['errorMax']
      const warningMin = $this.columns[columnInd]['warningMin']
      const warningMax = $this.columns[columnInd]['warningMax']
      if (typeof errorMin !== 'undefined') {
        if (val <= errorMin) {
          return { 'color': 'rgba(255, 0, 0, 1)' }
        }
      }
      if (typeof errorMax !== 'undefined') {
        if (val >= errorMax) {
          return { 'color': 'rgba(255, 0, 0, 1)' }
        }
      }
      if (typeof warningMin !== 'undefined') {
        if (val <= warningMin) {
          return { 'color': 'rgba(255, 255, 0, 1)' }
        }
      }
      if (typeof warningMax !== 'undefined') {
        if (val >= warningMax) {
          return { 'color': 'rgba(255, 255, 0, 1)' }
        }
      }
    },
    init() {
    }
  }
}
</script>

<style lang="scss" scoped>
.ik-chart-card {
  width: 100%;
  height: 100%;
  position: relative;
  .ik-chart-card-chart {
    .el-table {
      background-color: rgba(255, 255, 255, 0);
    }
    .ik-board-table-tr {
      background-color: rgba(255, 255, 255, 0);
    }
  }
  ::v-deep .el-card__header {
    padding: 10px;
    position: absolute;
    width: 100%;
    .clearfix {
      height: 20px;
      line-height: 20px;
    }
  }
  ::v-deep .el-card__body {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: calc(100% - 41px) !important;
    padding: 0px;
    padding-left: 5px;
    canvas {
      width: 100% !important;
      height: 100% !important;
    }
  }
}
</style>

<style>
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgba(0, 0, 0, 0.4) !important;
}
</style>
